<script setup>
import {ref} from "vue";
import apiAll from "@/api/apiAll.js";
import {tab_ipListLog} from "@/utils/tableColumn.js";

const visible = ref(false)
const columns = ref(tab_ipListLog);
const loading = ref(false)
const data = ref([])
const param = ref({
  page: 1,
  size: 10,
  total: 0
})

const loadData = () => {
  loading.value = true
  apiAll.ipList.listLog(param.value).then(res => {
    data.value = res.data
    param.value.total = res.total
  }).finally(() => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}

const changePage = (number) => {
  param.value.page = number
  loadData()
}
const changePageSize = (size) => {
  param.value.size = size
  loadData()
}
const show = () => {
  visible.value = true;
  loadData()
}
const handleCancel = () => {
  visible.value = false;
}
defineExpose({show});
</script>

<template>
  <a-drawer :width="700" :ok-loading="loading" :visible="visible" @ok="handleCancel" @cancel="handleCancel"
            ok-text="确认" unmountOnClose>
    <template #title>
      日志记录
    </template>
    <div class="flex-column">
      <a-table :columns="columns" :data="data" :loading="loading" :pagination="false">
      </a-table>
      <a-pagination @change="changePage" @page-size-change="changePageSize" :total="param.total" show-total show-jumper
                    style="margin-top: 15px" show-page-size/>
    </div>
  </a-drawer>

</template>

<style scoped>

</style>